<template>
  <div class="work_state">
    <span class="block_label_color small_label" :class="stateColor">{{data.statusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'WorkState',
  props: {
    data: Object
  },
  computed: {
    // 根据工单状态返回相应class
    stateColor() {
      switch (this.data.statusValue) {
        case 'Normal':
          // 正常
          return 'gd_state_normal'
        case 'Paused':
          // 已暂停
          return 'gd_state_paused'
        case 'Terminated':
          // 已终止
          return 'gd_state_terminated'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 工单状态颜色 */
  // 正常
  @gdStateNormal: #00a949;
  // 已暂停
  @gdStatePaused: #ff931f;
  // 已终止
  @gdStateTerminated: #7e8e9f;
  .work_state{
    .block_label_color{
      /*工单状态*/
      // 正常
      &.gd_state_normal{
        background-color: @gdStateNormal;
      }
      // 已暂停
      &.gd_state_paused{
        background-color: @gdStatePaused;
      }
      // 已终止
      &.gd_state_terminated{
        background-color: @gdStateTerminated;
      }
    }
  }
</style>
